<html>

<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>01-加载显示天地图</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <style>
        #map {
            width: 80%;
            height: 800px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
<script>
    const map = new ol.Map({
        target: "map",
        loadTilesWhileInteracting: true,
        layers: [
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
                })
            }),
            new ol.layer.Tile({
                title: "天地图注记图层",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
                })
            })
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 3
        })
    })
</script>
</html>